<template>
  <div class="pmeterhistory">
    <a-form-model layout="inline" :model="pages" :colon="false">
      <!--      <a-form-model-item label="行政区">-->
      <!--        <a-input v-model="formInline.user" placeholder="请输入行政区"></a-input>-->
      <!--      </a-form-model-item>-->
      <a-form-model-item label="污染源名称">
        <a-input v-model="pages.searchKey" placeholder="请输入污染源名称" allowClear />
      </a-form-model-item>
      <a-form-model-item label="变动参数">
        <a-select v-model="pages.parameter" show-search :filter-option="filterOption" style="width: 12vw" placeholder="请选择变动参数" allowClear>
          <a-select-option :value="v" v-for="v in selectData" :key="v">
            {{v}}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="时间">
        <a-date-picker v-model="pages.startTime" :default-value="pages.startTime" :disabled-date="disabledStartDate"
                       show-time format="YYYY-MM-DD HH:mm:ss" placeholder="开始时间" @openChange="handleStartOpenChange"/>
        <span style="color:#9fb043;font-size:18px;padding:0 10px;">—</span>
        <a-date-picker v-model="pages.endTime" :default-value="pages.endTime" :disabled-date="disabledEndDate"
                       show-time format="YYYY-MM-DD HH:mm:ss" placeholder="结束时间" :open="endOpen"
                       @openChange="handleEndOpenChange"/>
      </a-form-model-item>
      <a-form-model-item style="float: right">
        <a-button type="primary" @click="searchSub">搜索</a-button>
      </a-form-model-item>
    </a-form-model>
    <div class="table-class">
      <my-table style="height: 100%" :columns="columns" :data-source="tableData" :scroll="{x: 1500,y:'64vh'}" :rowKey="record=> record.id"
               :pagination="{itemRender:itemRender,onChange:pagechangeFn,showTotal:total => `共 ${total} 条记录`,total:total,defaultPageSize:pages.pageSize,defaultCurrent:pages.currentPage}">
      </my-table>
    </div>
  </div>
</template>

<script>
import moment from "moment";
const columns = [
  {title: '行政区', width: 150, dataIndex: 'areaName', align: 'center'},
  {title: '公司名称', dataIndex: 'companyName', align: 'center'},
  {title: '排口名称', dataIndex: 'monitorName', width: 150, align: 'center'},
  {title: '监测因子', dataIndex: 'monitorFactorsValue', width: 150, align: 'center'},
  {title: '变动时间', dataIndex: 'updateTime', align: 'center'},
  {title: '变动参数', dataIndex: 'modifyName', width: 150, align: 'center'},
  {title: '变动前', dataIndex: 'beforeData',  width: 150, align: 'center'},
  {title: '变动后', dataIndex: 'afterData', width: 150, align: 'center'},
  {title: '计量单位', dataIndex: 'unit', width: 150, align: 'center'},
];
export default {
  name: "PmeterHistory.vue",
  props:{
    monitorTypeList:{
      type:Array,
      request:true
    }
  },
  data(){
    return {
      columns,
      endOpen:false,
      selectData:[],
      tableData:[],
      PaginationData:{},
      pages: {
        currentPage:1,
        pageSize:10,
        searchKey:"",
        startTime:moment().add(-10,"d"),
        endTime:moment(),
        parameter:undefined,  //变动参数
        monitorTypeList:[],
      },
      total: 20,
    }
  },
  methods:{
    searchSub(){
      // console.log(this.pages)
      // this.pages.currentPage = 1;
      this.getData();
    },
    filterOption(input, option) {
      return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    // 分页方法
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a> 上一页 </a>;
      } else if (type === "next") {
        return <a> 下一页 </a>;
      }
      return originalElement;
    },
    pagechangeFn(page) {
      this.pages.currentPage = page;
      this.getData()
    },
    // 分页数据获取方法
    getData(){
      this.pages.monitorTypeList= this.monitorTypeList;
      let arr = JSON.parse(JSON.stringify(this.pages));
      arr.startTime = new Date(arr.startTime).getTime();
      arr.endTime = new Date(arr.endTime).getTime();
      console.log(arr)
      this.$api.controlFindModifyLog(arr).then(res => {
        if(res.data.code == 0){
          res.data.data.records.forEach(v=>{
            v.updateTime = moment(v.updateTime).format("YYYY/MM/DD HH:mm:ss")
          })
          this.tableData = res.data.data.records;
          this.total = res.data.data.total;
        }
      })
    },
    // 日期方法
    disabledStartDate(startValue) {
      const endValue = this.pages.endTime;
      if (!startValue || !endValue) {
        return false;
      }
      return startValue.valueOf() > endValue.valueOf();
    },
    disabledEndDate(endValue) {
      const startValue = this.pages.beginTime;
      if (!endValue || !startValue) {
        return false;
      }
      return startValue.valueOf() >= endValue.valueOf();
    },
    handleStartOpenChange(open) {
      if (!open) {
        this.endOpen = true;
      }
    },
    handleEndOpenChange(open) {
      this.endOpen = open;
    },
    // 日期方法完
  },
  mounted() {
    this.getData();
    this.$api.realTimeControlFindParameter().then(res=>{
      if(res.data.code === 0){
        this.selectData = res.data.data;
      }else {
        this.$message.warning("获取变动参数下拉数据失败")
      }
    })
  }
}
</script>

<style scoped lang="scss">
.pmeterhistory{
  width: 100%;
  height: 100%;
  padding: 1%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .table-class {
    width: 100%;
    height: 94%;
    .action-class{
      color: #207064;
      cursor: pointer;
    }
    ::v-deep .ant-spin-nested-loading,::v-deep .ant-spin-container,::v-deep .ant-table-wrapper{
      height: 100%;
    }
    ::v-deep .ant-table-pagination.ant-pagination{
      position: absolute;
      bottom: 0;
      right: 0;
    }
    ::v-deep .ant-table-wrapper .ant-table-fixed-header .ant-table-scroll .ant-table-header {
      overflow: hidden !important;
      margin-bottom: 0 !important;
    }
  }
}
</style>